<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录帮助中心</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
            color: #333;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        h2 {
            color: #3498db;
            margin-top: 30px;
        }
        .container {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .important {
            background-color: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 15px;
            margin: 15px 0;
            border-radius: 4px;
        }
        .credentials {
            background-color: #e6f7ff;
            padding: 15px;
            border-radius: 4px;
            margin: 15px 0;
        }
        .button {
            display: inline-block;
            background-color: #3498db;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            margin-top: 10px;
            font-weight: bold;
        }
        .button:hover {
            background-color: #2980b9;
        }
        .debug-tools {
            margin-top: 30px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }
        .debug-button {
            background-color: #6c757d;
            margin-right: 10px;
        }
        .debug-button:hover {
            background-color: #545b62;
        }
        .status {
            margin-top: 15px;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            white-space: pre-wrap;
            word-wrap: break-word;
            max-height: 300px;
            overflow-y: auto;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
        }
        .info {
            background-color: #d1ecf1;
            color: #0c5460;
        }
        ul {
            padding-left: 20px;
        }
        li {
            margin-bottom: 8px;
        }
    </style>
</head>
<body>
    <h1>登录帮助中心</h1>
    
    <div class="container">
        <h2>正确的登录页面</h2>
        
        <div class="important">
            <strong>注意：</strong>系统的正确登录页面路径是 <code>http://localhost:8081/login</code>
        </div>
        
        <p>您可以通过以下按钮直接访问正确的登录页面：</p>
        <a href="http://localhost:8081/login" class="button">打开登录页面</a>
    </div>
    
    <div class="container">
        <h2>默认登录凭据</h2>
        
        <div class="credentials">
            <p>系统默认的管理员账号信息：</p>
            <ul>
                <li><strong>用户名：</strong>admin</li>
                <li><strong>密码：</strong>admin123</li>
            </ul>
        </div>
        
        <p>请使用以上凭据登录系统。如果登录失败，请尝试使用以下调试工具解决问题。</p>
    </div>
    
    <div class="container">
        <h2>登录过程中的注意事项</h2>
        
        <ul>
            <li>请确保后端服务（<code>mvn spring-boot:run</code>）正在运行</li>
            <li>请确保前端开发服务器（<code>npm run dev</code>）正在运行</li>
            <li>登录成功后，系统会自动跳转到首页（<code>/dashboard</code>）</li>
            <li>如果遇到登录问题，可以尝试清除浏览器的LocalStorage</li>
            <li>首次登录后，请检查用户信息是否完整</li>
        </ul>
    </div>
    
    <div class="debug-tools">
        <h3>调试工具</h3>
        
        <p>以下工具可以帮助您解决登录过程中可能遇到的问题：</p>
        
        <button class="button debug-button" onclick="clearLocalStorage()">清除LocalStorage</button>
        <button class="button debug-button" onclick="showLocalStorageStatus()">查看LocalStorage状态</button>
        <button class="button debug-button" onclick="checkTokenFormat()">检查Token格式</button>
        <button class="button debug-button" onclick="testLoginAPI()">测试登录API</button>
        
        <div id="status" class="status info">点击上方按钮执行调试操作...</div>
    </div>
    
    <script>
        function showStatus(message, type = 'info') {
            const statusElement = document.getElementById('status');
            statusElement.textContent = message;
            statusElement.className = `status ${type}`;
        }
        
        function clearLocalStorage() {
            try {
                localStorage.clear();
                showStatus('LocalStorage已成功清除！', 'success');
            } catch (error) {
                showStatus(`清除LocalStorage失败：${error.message}`, 'error');
            }
        }
        
        function showLocalStorageStatus() {
            try {
                let status = 'LocalStorage内容：\n';
                const token = localStorage.getItem('token');
                const userInfo = localStorage.getItem('userInfo');
                
                status += `Token: ${token ? '存在' : '不存在'}\n`;
                status += `UserInfo: ${userInfo ? '存在' : '不存在'}\n\n`;
                
                if (token) {
                    status += `Token长度: ${token.length}\n`;
                    status += `Token包含点数量: ${(token.match(/\./g) || []).length}\n`;
                    status += `Token格式${(token.match(/\./g) || []).length === 2 ? '正确' : '错误'}`;
                }
                
                if (userInfo) {
                    try {
                        const parsedUserInfo = JSON.parse(userInfo);
                        status += `\n\nUserInfo结构：\n`;
                        status += `用户名: ${parsedUserInfo.username || parsedUserInfo.realName || '未知'}\n`;
                        status += `角色: ${parsedUserInfo.roles ? JSON.stringify(parsedUserInfo.roles) : '无'}\n`;
                    } catch (e) {
                        status += `\n解析UserInfo失败: ${e.message}`;
                    }
                }
                
                showStatus(status, 'info');
            } catch (error) {
                showStatus(`查看LocalStorage状态失败：${error.message}`, 'error');
            }
        }
        
        function checkTokenFormat() {
            try {
                const token = localStorage.getItem('token');
                if (!token) {
                    showStatus('LocalStorage中没有找到Token，请先登录。', 'warning');
                    return;
                }
                
                const dotCount = (token.match(/\./g) || []).length;
                let status = `Token分析结果：\n`;
                status += `Token长度: ${token.length}\n`;
                status += `Token包含点数量: ${dotCount}\n`;
                status += `Token格式${dotCount === 2 ? '正确' : '错误'}\n\n`;
                
                if (dotCount !== 2) {
                    status += '⚠️ 注意：有效的JWT令牌必须包含2个点字符。当前Token格式不正确！\n';
                    status += '建议：请清除LocalStorage后重新登录。';
                    showStatus(status, 'error');
                } else {
                    status += '✅ Token格式正确，可以正常使用。';
                    showStatus(status, 'success');
                }
            } catch (error) {
                showStatus(`检查Token格式失败：${error.message}`, 'error');
            }
        }
        
        function testLoginAPI() {
            showStatus('正在测试登录API...', 'info');
            
            const username = 'admin';
            const password = 'admin123';
            
            fetch('/auth/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, password })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP错误：${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                let status = '登录API测试结果：\n';
                status += `响应状态: 成功\n`;
                status += `状态码: ${data.code}\n`;
                status += `消息: ${data.message}\n\n`;
                
                if (data.data && data.data.token) {
                    status += '✅ 成功获取Token！\n';
                    status += `Token长度: ${data.data.token.length}\n`;
                    status += `Token包含点数量: ${(data.data.token.match(/\./g) || []).length}\n`;
                    status += `Token格式${(data.data.token.match(/\./g) || []).length === 2 ? '正确' : '错误'}\n\n`;
                    status += '提示：登录API工作正常，请使用登录页面进行登录。';
                    showStatus(status, 'success');
                } else {
                    status += '❌ 未获取到Token！\n';
                    status += `响应结构: ${JSON.stringify(data, null, 2)}\n\n`;
                    status += '错误：API返回的数据结构不符合预期。';
                    showStatus(status, 'error');
                }
            })
            .catch(error => {
                showStatus(`登录API测试失败：${error.message}\n\n请检查后端服务是否正常运行。`, 'error');
            });
        }
    </script>
</body>
</html>